<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter()
const routes = ['home', 'test']
const link = (idx: number) => router.push(`/${routes[idx]}`)
const goback = () => router.back() // router.go(-1)
</script>
<template>
  <div class="no-page top">
    <div class="tips">很抱歉！您访问的页面不存在......</div>
    <div>404</div>
  </div>
  <div class="no-page bot">
    <div>
      <div class="tips">您还可以：</div>
      <div>
        <el-button type="primary" @click="link(0)">返回首页</el-button>
        <el-button type="primary" @click="goback">返回上一页</el-button>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.no-page {
  display: flex;
  align-items: center;
  flex-direction: column;

  &.top {
    height: 60vh;
    justify-content: center;

    >div:nth-child(2) {
      font-size: 180px;
      letter-spacing: 14px;
    }
  }

  &.bot {
    height: 40vh;

    .tips {
      margin-bottom: 20px;
    }

    .el-button+.el-button {
      margin-left: 50px;
    }
  }

  .tips {
    font-size: 24px;
  }
}
</style>